<template>
    <div>
      <!-- 搜索区域 -->
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateSelect"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            @change="dateChange"
          />
        </el-form-item>
        <el-form-item label="广告类型">
          <el-select v-model="formData.type" clearable placeholder="请选择广告类型" style="width: 200px;">
            <el-option label="开屏" value="KP" />
            <el-option label="原生" value="YS" />
            <el-option label="banner" value="BANNER" />
            <el-option label="激励视频" value="JLSP" />
          </el-select>
        </el-form-item>
        <el-form-item label="广告ID">
          <el-input placeholder="" clearable v-model="formData.adid" />
        </el-form-item>
        <el-form-item label="链接">
          <el-input placeholder="" clearable v-model="formData.linkType" />
        </el-form-item>
        <el-form-item label="包名">
          <el-input placeholder="" clearable v-model="formData.package" />
        </el-form-item>
        <el-form-item label="oaid">
          <el-input placeholder="" clearable v-model="formData.oaid" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="searchHandler">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <el-button :icon="Checked" type="primary" plain>ECPM 总计：{{ sum_ecpm }}</el-button>
      <el-table :data="tableData">
        <el-table-column type="index" label="#" width="50"/>
        <el-table-column prop="adid" label="广告ID"  width="100"/>
        <el-table-column prop="ecpm" label="ECPM"  width="100"/>
        <el-table-column prop="link_type" label="链接" width="100" align="center"/>
        <el-table-column prop="type" label="广告类型" width="150" align="center">
          <template #default="scope">
            <el-tag type="primary" effect="dark" round v-if="scope.row.type == 'KP'">开屏</el-tag>
            <el-tag type="success" effect="dark" round v-else-if="scope.row.type == 'YS'">原生</el-tag>
            <el-tag type="warning" effect="dark" round v-else-if="scope.row.type == 'JLSP'">激励视频</el-tag>
            <el-tag type="danger" effect="dark" round v-else="scope.row.type == 'BANNER'">banner</el-tag>
          </template>
          </el-table-column>
          <el-table-column prop="package" label="包名" width="150" align="center"/>
          <el-table-column prop="oaid" label="oaid" width="400" align="center">
            <template #default="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.oaid" placement="top">
                <span @click="copyOaid(scope.row.oaid)">{{ scope.row.oaid.slice(0, 40) }}...</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="fir_add_time" label="时间" align="center" width="180"/>
        </el-table>
        <br/>
        <!-- 分页器 -->
        <el-pagination
          v-model:currentPage="pageNo"
          v-model:page-size="limit"
          @current-change="geEcpmListFn"
          @size-change="sizeChange"
          :page-sizes="[10, 20, 30]"
          background 
          layout="prev, pager, next, jumper, ->, sizes, total"
          :total="total" />
    </div>
  </template>

<script setup>
  import { ElMessage } from 'element-plus'
  import { ref, computed, onMounted } from "vue"
  import { Checked } from '@element-plus/icons-vue'
  import { geEcpmList } from "@/api/page/list1"

  // 分页器当前页码
  let pageNo = ref(1)
  // 每一页展示多少条数据
  let limit = ref(10)
  // 数据总条数
  let total = ref(0)
  // 分页的下拉菜单发生改变时触发
  const sizeChange = () => {
    pageNo.value = 1
    geEcpmListFn()
  }

  // ecpm总计
  const sum_ecpm = ref('')

  // 时间范围
  const dateSelect = ref('')
  const dateChange = (val) => {
    dateSelect.value = val
    if (val && Array.isArray(val)) {
      formData.value.dataStart = val[0]
      formData.value.dataEnd = val[1]
    } else {
      formData.value.dataStart = ''
      formData.value.dataEnd = ''
    }
  }

  // 表单数据收集
  const formData = ref({
    page: pageNo.value,
    pages: limit.value,
    dataStart: '',
    dataEnd: '',
    type: '',
    adid: '',
    linkType: '',
    package: '',
    oaid: ''
  })

  // 获取ecpm列表
  const tableData = ref([])
  const geEcpmListFn = async () => {
    let res = await geEcpmList(Object.assign(formData.value, {
      page: pageNo.value, // 页号
      pages: limit.value // 每页数量
    }))
    console.log("广告ecpm数据", res)
    tableData.value = res.data
    total.value = res.total
    sum_ecpm.value = res.sum_ecpm
  }

  // 点击搜索按钮
  const searchHandler = () => {
    pageNo.value = 1
    geEcpmListFn()
  }
  // 复制oaid
  const copyOaid = (oaid) => {
      let input = document.createElement('textarea')
      input.value = oaid
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      ElMessage({
          message: '复制成功',
          type: 'success',
          plain: true
    })
  }

  // 挂载完毕
  onMounted(() => {
    geEcpmListFn()
  })
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>